<template>
	<custom-page title="账单详情" backgroundColor="#F9F9F9">
		<template #content>
			<view class="page-content">
				<view class="content-layout">
					<view class="content-row">
						<view class="title">账单类型：</view>
						<view class="content">订单收益</view>
					</view>
					<view class="content-row">
						<view class="title">订单号：</view>
						<view class="content">{{billDetailInfo.orderId}}</view>
					</view>
					<view class="content-row">
						<view class="title">订单金额：</view>
						<view class="content">{{billDetailInfo.price}}</view>
					</view>
					<view class="content-row">
						<view class="title">退款金额：</view>
						<view class="content">{{billDetailInfo.refundPrice}}</view>
					</view>
					<view class="content-row">
						<view class="title">订单实际金额：</view>
						<view class="content">{{billDetailInfo.actualPrice}}</view>
					</view>
				</view>
				<view class="content-layout">
					<view class="content-row">
						<view class="title">入账金额：</view>
						<view class="content"><text class="money">{{billDetailInfo.incomeAmount}}</text>元</view>
					</view>
					<view class="content-row">
						<view class="title">入账时间：</view>
						<view class="content">{{billDetailInfo.createTime}}</view>
					</view>
				</view>
				<view class="tips">如有疑问请联系客服</view>
				<contact-service btnType="2"></contact-service>
				
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				billDetailInfo: {}
			}
		},
		onLoad(val) {
			this.incomeRecordDetail(val.id)
		},
		methods: {
			//入账记录
			incomeRecordDetail(id){
				this.requestCenter.incomeRecordDetail(id).then(res => {
					this.billDetailInfo = res
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-content{
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.content-layout{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		.content-row{
			height: 88rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1rpx #F5F5F5;
			font-size: 28rpx;
			.title{
				color: #585F70;
			}
			.content{
				color: #021624;
			}
			.money{
				color: #ED3C3D;
			}
		}
		.content-row:last-child{
			border-bottom: 0;
		}
	}
	.tips{
		font-size: 28rpx;
		color: #585F70;
		line-height: 48rpx;
		margin-top: 32rpx;
	}
</style>
